<template>
    <div class="Selections" v-loading="loading">
        <ul class="lists" v-if="video_list.length>0">
            <li @click="selectionHref(item)"
                class="clearfix animated fadeIn"
                :style="{animationDelay:delay(index)}"
                v-for="(item,index) in video_list"
                :key="index"
                v-if="video_list.length>0">
                <div class="left imgWrap">
                    <img class="imgFull" :src="item.video_img" alt="">
                    <svg class="icon playIcon" aria-hidden="true"><use xlink:href="#icon-bofang"></use></svg>
                </div>
                <div class="infos">
                    <h4 class="tit"><span class="end" v-if="item.is_buy===0">试看</span>{{item.video_name}}</h4>
                    <b class="time">{{item.add_time}}</b>
                    <p class="admin">{{item.teacher_name}}&emsp;{{item.teacher_level}}<span class="right"></span></p>
                    <div class="other">
                        <span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bofang"></use></svg>&#8197;{{item.video_view}}</span>
                        <span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shalou"></use></svg>&#8197;{{item.video_time}}</span>
                        <!--<span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-iconfontpinglun"></use></svg>&#8197;{{item.comment_num}}</span>-->
                        <span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>&#8197;{{item.praise_num}}</span>
                    </div>
                </div>
            </li>
        </ul>
        <!--无数据-->
        <div class="nodataCus animated fadeIn" v-if="video_list.length<=0">
            <!--<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wushuju"></use>
</svg>-->
            <img src="../../assets/huawa-off.png" alt="" />
            <p>暂无数据..</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Selections',
        data () {
            return {
                loading:false,
                video_list:[]
            }
        },
        props:['data'],
        cearted(){
        },
        mounted(){
            this.$nextTick( ()=> {
                this.video_list = this.data.videoList;
            })
        },
        methods:{
            //选集跳转
            selectionHref(item){
                this.$router.replace({path:'/transfer',query:{lession_id:this.$route.query.lession_id,member_id:this.getMemberId(),video_id:item.video_id}})
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Selections {
        /*选集列表*/
        .lists{
            overflow-x: hidden;
            padding: 0 .2rem;
            position: relative;
            li{
                width: 100%;
                padding:.34rem 0;
                border-bottom: 1px solid #e4e4e4;
                /*                    animation-duration:1.4s;*/
                &:last-child{
                    border-bottom: 0;
                }
                /*左侧图片*/
                .imgWrap{
                    width: 1.88rem;
                    height: 1.35rem;
                    position: relative;
                    .playIcon{
                        position: absolute;
                        font-size: .5rem;
                        top: calc(50% - .25rem);
                        left: calc(50% - .25rem);
                        color: #eb5b29;
                        font-weight: 600;
                    }
                }
                /*右侧信息*/
                .infos{
                    margin-left: 1.88rem;
                    padding-left: .2rem;
                    position: relative;
                    /*标题*/
                    .tit{
                        color: #333;
                        width: 60%;
                        line-height: .38rem;
                        margin-bottom: .24rem;
                        span.end{
                            display: inline-block;
                            height: 100%;
                            font-size: .28rem;
                            padding: 0 .12rem;
                            border-radius: .06rem;
                            margin-right: .1rem;
                            color: #fff;
                            background-color: #00a42a;
                        }
                    }
                    /**/
                    .time{
                        position: absolute;
                        right: 0;
                        top: .1rem;
                        font-size: .2rem;
                    }
                    /*老师*/
                    .admin{
                        color: #777;
                        margin-bottom: .28rem;
                        font-size: .22rem;
                    }
                    /*其他*/
                    .other{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: baseline;
                        font-size: .22rem;
                        .icon{
                            font-size: .3rem;
                            vertical-align: -.06rem
                        }
                    }
                    /*开课时间*/
                    .starttime{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-top: .2rem;
                        font-size: .2rem;
                    }
                }
            }
        }
        /*无数据*/
        .nodataCus{
            text-align: center;
            color: #999;
            font-size: .28rem;
            margin-top: .2rem;
            .icon{
                font-size: 2rem;
            }
        }
    }
</style>
